<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery File Upload Example</title>
		<style>
			.bar {
				height: 18px;
				background: green;
			}
		</style>

	</head>
	<body>
		<div class="span3">
			<form id="fileupload" action="../upload" method="POST" enctype="multipart/form-data">
				<input type="file" name="upload">
				<input id="type" type="text" name="type" value="IAA" />
				<input id="priority" type="text" name="priority"  value="3"/>				
			</form>
		</div>
		<div class="span6" id="progress">
			<div class="bar" style="width: 0%;"></div>
		</div>

		<script src="js/lib/jquery-1.8.0.min.js"></script>
		<script src="js/lib/vendor/jquery.ui.widget.js"></script>
		<script src="js/lib/jquery.iframe-transport.js"></script>
		<script src="js/lib/jquery.fileupload.js"></script>
		<script>
			$(function() {
				
				$('#fileupload').fileupload({
					//url : "../upload?type=1&priority=2",
					//dataType : 'json',
					add : function(e, data) {
						//data.submit();
						var jqXHR = data.submit().success(function(result, textStatus, jqXHR) {
							var val = jqXHR.responseText;
								console.log(val);
						}).error(function(jqXHR, textStatus, errorThrown) {
							alert("error")
						}).complete(function(result, textStatus, jqXHR) {
							alert("complete")
						});
						
						
						jqXHR.onreadystatechange = function() {
							if (xhr.readyState === 4) {
								var val = jqXHR.responseText;
								console.log(val);
							}
						};
						
						
						

					},
					progressall : function(e, data) {
						var progress = parseInt(data.loaded / data.total * 100, 10);
						$('#progress .bar').css('width', progress + '%');
					},
					done : function(e, data) {
						$.each(data.result, function(index, file) {
							$('<p/>').text(file.name).appendTo(document.body);
						});
						// data.context.text('Upload finished.')

					}
				});

			});

		</script>
	</body>
</html>
